<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>吸顶导航栏</title>
  <link rel="stylesheet" href="../base.css">
  <link rel="stylesheet" href="./25.css">
</head>
<body>
  <div id="app">
    <div class="nav">
      <div class="w nav_info">
        <div class="nav_left">My Website</div>
        <div class="nav_right">
          <span class="nav_item">Home</span>
          <span class="nav_item">About</span>
          <span class="nav_item">Services</span>
          <span class="nav_item">Contact</span>
        </div>
      </div>
    </div>

    <div class="banner">
      <div class="banner_title">Welcome To My Website</div>
      <div class="banner_subtitle">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</div>
    </div>

    <div class="w article">
      <div class="article_item">
        <div class="article_title">Content One</div>
        <div class="article_content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates
          eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore
          officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error
          reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum
          voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat
          officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum
          velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</div>
      </div>
      <div class="article_item">
        <div class="article_title">Content Two</div>
        <div class="article_content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum
          possimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit
          provident, voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est!
          Tenetur tempora doloremque quae iste aperiam hic cumque repellat?</div>
      </div>
    </div>
  </div>
  <script src="./25.js"></script>
</body>
</html>